<style scoped>
  .app-container>>>.el-tabs__nav{
    left: 50%;
    transform: translateX(-50%) !important;
  }
  .app-container>>>.el-tabs__item{
    font-size: 18px;
    color: #aaa;
  }
  .app-container>>>.is-active{
    font-weight: 600;
    color: #409EFF;
  }
</style>
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-if="formThead.id" v-model="listQuery.id" style="width: 200px;" class="filter-item" placeholder="id" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.merchantName" v-model="listQuery.merchantName" style="width: 200px;" class="filter-item" placeholder="商家名称" clearable @keyup.enter.native="handleFilter"/>
      <el-select v-model="listQuery.tags" style="width: 200px;" class="filter-item" placeholder="标签" clearable @keyup.enter.native="handleFilter">
        <el-option
          v-for="item in tags"
          :key="item.id"
          :label="item.title"
          :value="item.id"/>
      </el-select>
      <template>
        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable class="filter-item">
          <el-option
            v-for="item in auditStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </template>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <!--<addPage @getLists="getLists"/>-->
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.id" label="id">id</el-checkbox>
      <el-checkbox v-model="formThead.merchantName" label="商家名称">商家名称</el-checkbox>
      <el-checkbox v-model="formThead.adminAccount" label="后台账号">后台账号</el-checkbox>
      <el-checkbox v-model="formThead.adminPassword" label="后台密码">后台密码</el-checkbox>
      <el-checkbox v-model="formThead.auditStatus" label="审核状态">审核状态</el-checkbox>
    </div>
    <el-tabs v-model="activeName" align="center" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
          <el-table-column v-if="formThead.id" align="center" label="id">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.merchantName" align="center" label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.merchantName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.tags" align="center" label="标签">
            <template slot-scope="scope">
              <span><el-tag v-for="item in scope.row.tags_title" :key="item" style="margin: 3px">{{ item }}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.adminAccount" align="center" label="后台账号">
            <template slot-scope="scope">
              <span>{{ scope.row.adminAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.auditStatus" align="center" label="审核状态">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='P'" type="success" size="small" icon="el-icon-circle-check" circle title="审核通过"/>
              <el-button v-else-if="scope.row.auditStatus==='A'" type="warning" size="small" icon="el-icon-bell" circle title="审核中"/>
              <el-button v-else-if="scope.row.auditStatus==='U'" type="warning" size="small" icon="el-icon-remove" circle title="未审核"/>
              <el-button v-else type="info" size="small" icon="el-icon-circle-close" circle title="审核失败"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="配置状态">
            <template slot-scope="scope">
              <el-button v-if="scope.row.config_status" type="success" size="small" icon="el-icon-circle-check" circle title="存在配置信息"/>
              <el-button v-else type="info" size="small" icon="el-icon-circle-close" circle title="暂无配置信息"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料详情">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='U'" type="info" size="small" icon="el-icon-close" circle title="资料保密"/>
              <span v-else><content_details :row_data="scope.row" @getLists="getLists"/></span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-search" circle title="查看后台" class="buttoncss" @click="login(scope.row.id)"/>
              <editPage :row_data="scope.row" @getLists="getLists"/>
              <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未审核" name="second">
        <el-table v-loading="listLoading" :key="tableKey" :data="list_u" border fit highlight-current-row style="width: 100%;">
          <el-table-column v-if="formThead.id" align="center" label="id">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.merchantName" align="center" label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.merchantName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.tags" align="center" label="标签">
            <template slot-scope="scope">
              <span><el-tag v-for="item in scope.row.tags_title" :key="item" style="margin: 3px">{{ item }}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.adminAccount" align="center" label="后台账号">
            <template slot-scope="scope">
              <span>{{ scope.row.adminAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.auditStatus" align="center" label="审核状态">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='U'" type="warning" size="small" icon="el-icon-remove" circle title="未审核"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料详情">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='U'" type="info" size="small" icon="el-icon-close" circle title="资料保密"/>
              <span v-else><content_details :row_data="scope.row" @getLists="getLists"/></span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <editPage :row_data="scope.row" @getLists="getLists"/>
              <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="审核中" name="third">
        <el-table v-loading="listLoading" :key="tableKey" :data="list_a" border fit highlight-current-row style="width: 100%;">
          <el-table-column v-if="formThead.id" align="center" label="id">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.merchantName" align="center" label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.merchantName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.tags" align="center" label="标签">
            <template slot-scope="scope">
              <span><el-tag v-for="item in scope.row.tags_title" :key="item" style="margin: 3px">{{ item }}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.adminAccount" align="center" label="后台账号">
            <template slot-scope="scope">
              <span>{{ scope.row.adminAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.auditStatus" align="center" label="审核状态">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='A'" type="warning" size="small" icon="el-icon-bell" circle title="审核中"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料详情">
            <template slot-scope="scope">
              <content_details :row_data="scope.row" @getLists="getLists"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <editPage :row_data="scope.row" @getLists="getLists"/>
              <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.phone,scope.row.id)"/>
              <through :row_data="scope.row" @getLists="getLists"/>
              <el-button style="margin-bottom:10px" type="success" class="buttoncss" icon="el-icon-circle-check" circle title="审核通过" @click="verified(scope.row.phone, scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="审核通过" name="fourth">
        <el-table v-loading="listLoading" :key="tableKey" :data="list_p" border fit highlight-current-row style="width: 100%;">
          <el-table-column v-if="formThead.id" align="center" label="id">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.merchantName" align="center" label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.merchantName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.tags" align="center" label="标签">
            <template slot-scope="scope">
              <span><el-tag v-for="item in scope.row.tags_title" :key="item" style="margin: 3px">{{ item }}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.adminAccount" align="center" label="后台账号">
            <template slot-scope="scope">
              <span>{{ scope.row.adminAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.auditStatus" align="center" label="审核状态">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='P'" type="success" size="small" icon="el-icon-circle-check" circle title="审核通过"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料详情">
            <template slot-scope="scope">
              <content_details :row_data="scope.row" @getLists="getLists"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <editPage :row_data="scope.row" @getLists="getLists"/>
              <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="审核失败" name="fifth">
        <el-table v-loading="listLoading" :key="tableKey" :data="list_f" border fit highlight-current-row style="width: 100%;">
          <el-table-column v-if="formThead.id" align="center" label="id">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.merchantName" align="center" label="商家名称">
            <template slot-scope="scope">
              <span>{{ scope.row.merchantName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.tags" align="center" label="标签">
            <template slot-scope="scope">
              <span>
                <el-tag v-for="item in scope.row.tags_title" :key="item" style="margin: 3px">{{ item }}</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.adminAccount" align="center" label="后台账号">
            <template slot-scope="scope">
              <span>{{ scope.row.adminAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.auditStatus" align="center" label="审核状态">
            <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus==='F'" type="info" size="small" icon="el-icon-circle-close" circle title="审核失败"/>
            </template>
          </el-table-column>
          <el-table-column v-if="formThead.auditStatus" align="center" label="失败原因">
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus === 'F'">{{ scope.row.auditStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资料详情">
            <template slot-scope="scope">
              <content_details :row_data="scope.row" @getLists="getLists"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <editPage :row_data="scope.row" @getLists="getLists"/>
              <el-button type="danger" icon="el-icon-delete" circle title="删除" class="buttoncss" @click="del(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>

        <!--<div class="pagination-container">-->
        <!--<el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>-->
        <!--</div>-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { getList, getSearchLists, del, invoke, forbidden, sendMessage, get_merchant_admin_url, tags } from '@/api/merchant/merchant'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import addPage from './addPage'
import editPage from './editPage'
import through from './through'
// import RefusedTo from './RefusedTo'
import content_details from './content_details'
export default {
  name: 'DragDialogDemo',
  directives: {
    elDragDialog,
    waves
  },
  // components: { addPage, editPage, content_details, RefusedTo, through },
  components: { addPage, editPage, content_details, through },
  data() {
    return {
      auditStatus: [{
        value: 'P',
        label: '审核成功'
      }, {
        value: 'F',
        label: '审核失败'
      }, {
        value: 'A',
        label: '审核中'
      }, {
        value: 'U',
        label: '未审核'
      }],
      activeName: 'first',
      act_item: null,
      list_a: [],
      list_p: [],
      list_f: [],
      list_u: [],
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      tags: [],
      merchant_admin_url: '',
      listQuery: {
        id: undefined,
        merchantName: undefined,
        tags: undefined,
        tag: undefined,
        adminAccount: undefined,
        adminPassword: undefined,
        paymentCode: undefined,
        auditStatus: undefined,
        merchantTotalMoney: undefined,
        merchantRevenue: undefined,
        merchantExpenditure: undefined,
        status: undefined,
        phone: undefined,
        config_status: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        id: true,
        merchantName: true,
        tags: true,
        adminAccount: true,
        adminPassword: true,
        paymentCode: true,
        auditStatus: true,
        merchantTotalMoney: true,
        merchantRevenue: true,
        merchantExpenditure: true,
        status: false,
        phone: false
      }
    }
  },
  created() {
    this.get_merchant_admin_url()
    this.getLists()
    tags(store.getters.token).then(res => {
      this.tags = res.data.list
    })
  },
  methods: {
    get_merchant_admin_url() {
      get_merchant_admin_url('').then(res => {
        this.merchant_admin_url = res.data.url
      })
    },
    login(id) {
      if (this.merchant_admin_url === '') {
        this.$message({
          type: 'error',
          message: '页面错误，请重新刷新页面！'
        })
      } else {
        // window.open('http://localhost:9527/#/loginCompany/' + id, '_blank')
        window.open('http://' + this.merchant_admin_url + '/#/loginCompany/' + id, '_blank')
      }
    },
    verified(phone, id) {
      this.$confirm('是否审核成功,是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        sendMessage(store.getters.token, phone, id).then(res => {
          if (res.status) {
            this.$message({
              type: 'success',
              message: '已经通过审核，已发送短信通知客户!'
            })
          }
          this.getLists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消审核操作'
        })
      })
    },
    handleClick(tab) {
      console.log('tab----', this.activeName)
      // console.log(tab, event)
    },
    invoke(id) {
      invoke(store.getters.token, { id: id, index: 'index' }).then(res => {
        this.$message({
          message: '启用成功',
          type: 'success'
        })
        this.getLists()
      })
    },
    forbidden(id) {
      forbidden(store.getters.token, { id: id, index: 'index' }).then(res => {
        this.$message({
          message: '禁用成功',
          type: 'success'
        })
        this.getLists()
      })
    },
    getLists() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        this.list_a = []
        this.list_p = []
        this.list_f = []
        this.list_u = []
        const len = this.list.length
        for (var i = 0; i < len; i++) {
          console.log(this.list[0].auditStatus)
          if (this.list[i].auditStatus === 'A') {
            this.list_a.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'P') {
            this.list_p.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'F') {
            this.list_f.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'U') {
            this.list_u.push(this.list[i])
            continue
          }
        }
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    getSearchLists() {
      this.listLoading = true
      getSearchLists(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        console.log(this.list)
        const len = this.list.length
        for (var i = 0; i < len; i++) {
          console.log(this.list[0].auditStatus)
          if (this.list[i].auditStatus === 'A') {
            this.list_a.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'P') {
            this.list_p.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'F') {
            this.list_f.push(this.list[i])
            continue
          }
          if (this.list[i].auditStatus === 'U') {
            this.list_u.push(this.list[i])
            continue
          }
        }
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    del(id) {
      this.$confirm('此操作将会删除该记录,是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.$message.info('正在删除' + id)
        del(store.getters.token, { id: id }).then(res => {
          this.$message.info('已经删除' + id)
          this.getLists()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败!'
        })
      })
    }
  }
}
</script>
